<template>
    <div>
      <h2>密码安全</h2>
      <el-form :model="form" label-width="120px">
        <el-form-item label="原始密码">
          <el-input v-model="form.oldPassword" type="password" />
        </el-form-item>
        <el-form-item label="新密码">
          <el-input v-model="form.newPassword" type="password" />
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input v-model="form.confirmPassword" type="password" />
        </el-form-item>
        <el-button type="primary" @click="changePassword" style="margin-top: 20px;margin-left: 40px;">确认修改</el-button>
      </el-form>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        form: {
          oldPassword: '',
          newPassword: '',
          confirmPassword: '',
        }
      }
    },
    methods: {
      async changePassword() {
        const { oldPassword, newPassword, confirmPassword } = this.form;
  
        // 检查新密码与确认密码是否一致
        if (newPassword !== confirmPassword) {
          this.$message.error('新密码与确认密码不匹配');
          return;
        }
  
        // 检查密码长度
        if (newPassword.length < 5 || newPassword.length > 11) {
          this.$message.error('新密码长度必须在 5 到 11 个字符之间');
          return;
        }
  
        // 如果需要验证原始密码，您可以在这里进行 API 请求
  
        // 如果以上校验都通过
        this.$message.success('密码修改成功');
      }
    }
  }
  </script>
  
  <style scoped>
  </style>
  